<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title id="title">加载中...</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/customed.js"></script>
</head>
<body>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div id="main" style="width:100%;height:400px;"></div>
			<h1 id="table_h"></h1>
			<table class="table table-bordered table-hover">
				<thead id="thead">					
				</thead>
				<tbody id="tbody">					
				</tbody>
			</table>
		</div>
	</div>
</div>
<script>
$.ajax({
  type: "get",
  async:true,
  url: "https://api.asilu.com/weather_v2/",
  dataType: "jsonp",
  jsonpCallback:"jsonpCallback",            
  success: function(data){
  var city=data.forecasts[0].city;
  var casts=data.forecasts[0].casts;
  var today=casts[0].date;
  var dates=[];
  var week=[];
  var daytemp=[];
  var nighttemp=[];
  var dayweather=[];
  var nightweather=[];
  var daywind=[];
  var nightwind=[];
  var daypower=[];
  var nightpower=[];
  var thead="",tr1="",tr2="",tr3="",tr4="",tr5="",tr6="",tr7="",tr8="",tr9="";
  for(i=0;i<4;i++){
	  dates[i]=casts[i].date;
	  week[i]=casts[i].week;
	  daytemp[i]=casts[i].daytemp;
	  nighttemp[i]=casts[i].nighttemp;
	  dayweather[i]=casts[i].dayweather;
	  nightweather[i]=casts[i].nightweather;
	  daywind[i]=casts[i].daywind;
	  nightwind[i]=casts[i].nightwind;
	  daypower[i]=casts[i].daypower;
	  nightpower[i]=casts[i].nightpower;
	  thead=thead+"<th>" +dates[i]+"</th>";
	  tr1=tr1+"<td>"+week[i]+"</td>";
	  tr2=tr2+"<td>"+daytemp[i]+"</td>";
	  tr3=tr3+"<td>"+nighttemp[i]+"</td>";
	  tr4=tr4+"<td>"+dayweather[i]+"</td>";
	  tr5=tr5+"<td>"+nightweather[i]+"</td>";
	  tr6=tr6+"<td>"+daywind[i]+"</td>";
	  tr7=tr7+"<td>"+nightwind[i]+"</td>";
	  tr8=tr8+"<td>"+daypower[i]+"</td>";
	  tr9=tr9+"<td>"+nightpower[i]+"</td>";	  
	}  
  document.getElementById('title').innerHTML=city+'的天气';
  document.getElementById('table_h').innerHTML=city+'天气报告';
  document.getElementById('thead').innerHTML="<tr><th>日期</th>"+thead+"</tr>";
  document.getElementById('tbody').innerHTML="<tr><th>星期</th>"+tr1+"</tr>"+"<tr><th>白天气温（°C）</th>"+tr2+"</tr>"+"<tr><th>夜晚气温（°C）</th>"+tr3+"</tr>"+"<tr><th>白天天气</th>"+tr4+"</tr>"+"<tr><th>夜晚天气</th>"+tr5+"</tr>"+"<tr><th>白天风向</th>"+tr6+"</tr>"+"<tr><th>夜晚风向</th>"+tr7+"</tr>"+"<tr><th>白天风力等级</th>"+tr8+"</tr>"+"<tr><th>晚上风力等级</th>"+tr9+"</tr>";

  var myChart = echarts.init(document.getElementById('main'),'customed');
	 var option = {
    title: {
        text: city+'未来三天气温',
        subtext: today
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['日间气温', '夜间气温']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dates
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name: '日间气温',
            type: 'line',
            data: daytemp,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '夜间气温',
            type: 'line',
            data: nighttemp,
            markPoint: {
                data: [
                    {name: '四日最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            position: 'start',
                            formatter: '最大值'
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};
myChart.setOption(option);       	
  },
  error: function (e) {
	  alert("error");
  }
});
</script>
</body>
</html>
